<template>
  <Layout style="height: 100%" class="main">
    <Sider
      hide-trigger
      collapsible
      :width="250"
      v-if="showMenu"
      :collapsed-width="64"
      v-model="collapsed"
      class="left-sider"
      :style="{ overflow: 'hidden' }"
    >
      <side-menu
        :accordion="true"
        ref="sideMenu"
        :active-name="$route.name"
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div
          class="logo-con"
          @click="turnToPage({ name: 'home', params: {}, query: {} })"
        >
        <!-- 鸿博志成logo -->
          <div class="logo-con-max" v-show="!collapsed">
            <img src="../../assets/images/loguinJX.png" alt="" />
            
          </div>
          <!-- <div>伙食保障精细管理系统</div> -->
          <div class="logo-con-min" v-show="collapsed">
            <img src="../../assets/images/logo.png" alt="" />
          </div>
        </div>
      </side-menu>
    </Sider>
    <Sider :width="0" v-else></Sider>
    <Layout>
      <div v-if="showMenu" class="header-con">
        <header-bar
          :collapsed="collapsed"
          @on-coll-change="handleCollapsedChange"
          v-if="showMenu"
        >
        <onLineStatus v-if="systemCode == 'business'"></onLineStatus>
          <Message v-if="false"></Message>
          <fullscreen v-model="isFullscreen" style="margin-right: 10px" />
          <user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
          <!--<language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>-->
          <!--<Theme></Theme>-->
        </header-bar>
        <!--<header-title></header-title>-->
      </div>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <!-- <div v-if="showMenu" class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
          </div> -->
          <Content class="content-wrapper" @scroll.native="onScroll" id="wrap">
            <!--<page-title></page-title>-->
            <keep-alive :include="cacheList">
              <!--<Card class="content-wrapper-card"></Card>-->
              <router-view :key="key"/>
            </keep-alive>
            <ABackTop
              :height="100"
              :bottom="40"
              :right="50"
              container=".content-wrapper"
            ></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from "./components/side-menu";
import HeaderBar from "./components/header-bar";
import TagsNav from "./components/tags-nav";
import User from "./components/user";
import ABackTop from "./components/a-back-top";
import Fullscreen from "./components/fullscreen";
// import Language from './components/language'
// import Theme from "./components/theme/theme";
import onLineStatus from './components/onLineStatus/onLineStatus.vue'
import Message from "./components/message/message";
import pageTitle from "./components/page-title/page-title";
import headerTitle from "./components/header-title/header-title";
import ErrorStore from "./components/error-store";
import workProgress from './components/work-progress/inedx.vue'
import { mapMutations, mapActions, mapGetters } from "vuex";
import { getNewTagList, routeEqual } from "@/libs/util";
import { defRouters, baseRouters } from "@/router/routers";
import "./main.less";

export default {
  name: "Main",
  components: {
    Message,
    SideMenu,
    headerTitle,
    HeaderBar,
    pageTitle,
    // Theme,
    // Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop,
    onLineStatus,
    workProgress
  },
  data() {
    return {
      collapsed: false,
      isFullscreen: false,
      systemCode: localStorage.getItem('systemCode'),
       
    };
  },
  computed: {
    ...mapGetters(["errorCount"]),
    tagNavList() {
      return this.$store.state.app.tagNavList;
    },
    tagRouter() {
      return this.$store.state.app.tagRouter;
    },
    showMenu() {
      return this.$store.state.show_menu;
    },
    vuexMenu() {
      return this.$store.state.vuex_menu;
    },
    userAvatar() {
      return this.$store.state.user.avatarImgPath;
    },
    cacheList() {
      const list = [
        "ParentView",
        ...(this.tagNavList.length
          ? this.tagNavList
              .filter((item) => !(item.meta && item.meta.notCache))
              .map((item) => item.name)
          : []),
      ];
      return list;
    },
    menuList() {
      return this.$store.getters.menuList;
    },
    key() {
      console.log('调试',this.$route.path + Math.random());
      return this.$route.path + Math.random();
    },
    local() {
      return this.$store.state.app.local;
    },
    hasReadErrorPage() {
      return this.$store.state.app.hasReadErrorPage;
    },
    unreadCount() {
      return this.$store.state.user.unreadCount;
    },
  },
  methods: {
    ...mapMutations([
      "setBreadCrumb",
      "setTagNavList",
      "addTag",
      "setLocal",
      "setHomeRoute",
      "closeTag",
    ]),
    ...mapActions(["handleLogin", "getUnreadMessageCount"]),
    turnToPage(route) {
      let { name, params, query } = {};
      if (typeof route === "string") {
        name = route;
      } else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf("isTurnByHref_") > -1) {
        window.open(name.split("_")[1]);
        return;
      }
      // 避免重复跳转
      if (this.$route.name === name) return;
      this.$router.push({
        name,
        params,
        query,
      });
    },
    handleCollapsedChange(state) {
      this.collapsed = state;
      this.$cu.vuex("menu_collapsed", state);
    },
    handleCloseTag(res, type, route) {
      if (type !== "others") {
        if (type === "all") {
          this.turnToPage(this.$config.homeName);
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route);
          }
        }
      }
      this.setTagNavList(res);
    },
    handleClick(item) {
      this.turnToPage(item);
    },
    setMenu() {
      if (this.vuex_routers.length) {
        let initMenu = this.$cu.dealTree(
          this.$cu.deepClone(this.vuex_routers[0].children),
          (node) => node.name == this.$route.name
        );

        if (initMenu.length) {
          this.$cu.vuex("vuex_menu", initMenu[0]);
        }
      }
    },
    onScroll() {
      const el = document.querySelector("#wrap");
      const offsetHeight = el.offsetHeight;
      const scrollTop = el.scrollTop;
      const scrollHeight = el.scrollHeight;
      if (offsetHeight + scrollTop - scrollHeight >= 0) {
        this.$cu.vuex("vuex_end", true);
      } else {
        this.$cu.vuex("vuex_end", false);
      }
    },
  },
  watch: {
    $route(newRoute) {
      const { name, query, params, meta } = newRoute;
      this.addTag({
        route: { name, query, params, meta },
        type: "push",
      });
      this.setBreadCrumb(newRoute);
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute));
      this.$refs.sideMenu.updateOpenName(newRoute.name);
    },
  },
  mounted() {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList();
    this.setHomeRoute(defRouters.concat(baseRouters));
    this.setMenu();
    const { name, params, query, meta } = this.$route;
    this.addTag({
      route: { name, params, query, meta },
    });
    this.setBreadCrumb(this.$route);
    // 设置初始语言
    this.setLocal(this.$i18n.locale);
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find((item) => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName,
      });
    }
    // 获取未读消息条数
    // this.getUnreadMessageCount()
  },
};
</script>
